﻿<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在签到中.....</title>
</head>

<body>
<h3>
    ${empty requestScope.msg?"":requestScope.msg}<br>
    ${empty requestScope.errormsg?"":requestScope.errormsg}

</h3>
<div id="allmap" style="height: 600px;width: 800px;"></div>
<!-- 自己的ak不能用可能有限制 -->
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ixYYicqb3EvQtEjfbGY4ObKxOoauFxnT">
</script>

<script type="text/javascript">
    var lon, lat;

    function getLocation() {
        if (navigator.geolocation) {
            //alert("正在签到 请稍等！......");
            //alert("由于获取用户的定位需要一段时间，大概10秒左右，请在【弹出定位成功的窗口后】进行签到操作.");
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            alert("浏览器不支持地理定位。");
        }
    }

    getLocation();

    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                alert("定位失败,用户拒绝请求地理定位");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("定位失败,位置信息是不可用");
                break;
            case error.TIMEOUT:
                alert("定位失败,请求获取用户位置超时");
                break;
            case error.UNKNOWN_ERROR:
                alert("定位失败,定位系统失效");
                break;
        }
    };

    function showPosition(position) {
        var latlon = position.coords.latitude + ',' + position.coords.longitude;
        var url = "https://api.map.baidu.com/geocoder/v2/?ak=hCBcm8H8opRLdC0f6OibbGavC0pne1uc&callback=renderReverse&location=" + latlon + "&output=json&pois=0";
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            url: url,
            success: function (json) {
                console.log(json);
                var ggPoint = new BMap.Point(json.result.location.lng, json.result.location.lat); //创建标点
                //坐标转换完之后的回调函数
                translateCallback = function (data) {
                    if (data.status === 0) {
                        var marker = new BMap.Marker(data.points[0]);
                        lon = data.points[0].lng;
                        lat = data.points[0].lat
                        //alert("您的位置：" + lat + ',' + lon);
                        var map = new BMap.Map("allmap");
                        var geolocation = new BMap.Geolocation({
                            maximumAge: 10  // 清除缓存
                        });
                        var mk = new BMap.Marker(data.points[0]); //标注你的位置
                        map.addOverlay(mk); // 标出所在地
                        map.panTo(data.points[0]); // 地图中心移动
                        var pointt = new BMap.Point(${lon}, ${lat}); //设置的签到点经纬度
                        map.centerAndZoom(pointt, 12);
                        var point = new BMap.Point(lon, lat); // 用所定位的经纬度查找所在地省市街道等信息
                        var gc = new BMap.Geocoder();
                        gc.getLocation(point, function (rs) { //获取当前定位所在地
                            var province = 0; //获取省份
                            var city = 0; //获取城市
                            var district = 0; //区
                            var street = 0; //街
                            var streetNumber = 0; //街
                            var business = 0; //建筑
                            var addComp = rs.addressComponents;
                            province = addComp.province; //获取省份
                            city = addComp.city; //获取城市
                            district = addComp.district; //区
                            street = addComp.street; //街
                            streetNumber = addComp.streetNumber; //街
                            business = addComp.business; //商业建筑
                            var v = province + city + district + street + streetNumber + business; // 有的地方没有商业建筑所以是未定义
                        });
                        circle = new BMap.Circle(pointt, 500, { //签到地点
                            fillColor: "blue", //圆形颜色
                            strokeWeight: 1,
                            fillOpacity: 0.2,
                            strokeOpacity: 0.2
                        }); // 显示签到点的位置（半径为500米的一个圆）
                        map.addOverlay(circle);
                        //----弹窗标注目的地的信息
                        var sContent = "目标签到点";
                        var infoWindow = new BMap.InfoWindow(sContent);
                        map.openInfoWindow(infoWindow, pointt);
                        //---------------------------
                        //计算当前位置与考勤点距离
                        var distance = map.getDistance(point, pointt).toFixed(2);
                        // alert("您距离签到地点" + distance + "米！");
                        // if (distance <= 500) { //逻辑处理
                        //     //在范围内
                        //     alert("签到成功!");
                        // } else { //逻辑处理
                        //     //不在范围内
                        //     alert("签到失败!");
                        // }
                    }
                }
                var convertor = new BMap.Convertor(); //这个类就是转换的对象
                var pointArr = [];
                pointArr.push(ggPoint);
                convertor.translate(pointArr, 1, 5, translateCallback) //通过调用回调函数来进行转换。
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(latlon + "地址位置获取失败");
            }
        });
    };
</script>


</body>

</html>